<template>
    <div class="container-fluid">
        <h2>我的购物车</h2>
        <div class="alert alert-warning">
            <router-link :to="'/product'" class="btn btn-default">点击返回商品列表</router-link>
        </div>
        <!--        购物车列表-->
        <table class="table table-striped">
            <thead>
            <tr>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!--            循环操作-->
            <tr v-for="(v,i) in cartArray" :key="i">
                <td>{{v.proName}}</td>
                <td>{{v.proPrice}}</td>
                <td>{{v.num}}</td>
                <td>{{v.proPrice*v.num}}</td>
                <td>
                    <button class="btn btn-danger" @click="deletepro(i)">删除</button>
                </td>
            </tr>

            </tbody>
        </table>
<!--        <p>{{shang}}</p>-->
    </div>
</template>
<script>
    export default {
        name: "Cart",
        data: () => {
            return {
                cartArray: [],
            }
        },
        props:["add"],
        methods: {
            deletepro(i) {
                this.cartArray.splice(i, 1);

            }
        },
        created() {
            this.axios.get("/api/show").then(data=>{
                console.log(data.data);
                this.cartArray=data.data;
            }).catch(err=>{})
        }
    }
</script>

<style scoped>

</style>